<template>
  <div v-show="visible"
       class="photo-wrap">
    <flexbox class="photo-content"
             justify="center"
             align="center"
             :style="{'font-size' : fontSize+'px'}">
      <div v-if="text">{{text}}</div>
    </flexbox>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: null,
      visible: false,
      fontSize: 12
    }
  },
  watch: {
    visible: function(params) {
      this.$nextTick(() => {
        if (this.$el.getBoundingClientRect().height > 0) {
          let fontSize = this.$el.getBoundingClientRect().height * 0.38
          if (fontSize > 40) {
            fontSize = 40
          }
          this.fontSize = fontSize
        } else {
          this.fontSize = 12
        }
      })
    }
  },
  computed: {},
  mounted() {},
  methods: {
    setText(text) {
      if (text) {
        this.text = text
      }
    },
    setIcon(icon) {
      this.icon = icon
    }
  }
}
</script>

<style lang="scss" scoped>
.photo-wrap {
  position: absolute;
  z-index: 1;
  // background-color: white;
  margin: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  .photo-content {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #2486e4;
    color: white;
    div {
      width: 100%;
      text-align: center;
      transform: scale(0.9, 0.9);
      max-height: 50px;
      overflow: hidden;
    }
  }
}
</style>

